<template>
  <div class="permission-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>权限管理</span>
        </div>
      </template>

      <el-table :data="permissions" v-loading="loading" border>
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="name" label="权限名称" />
        <el-table-column prop="code" label="权限编码" />
        <el-table-column prop="description" label="描述" />
        <el-table-column prop="type" label="类型">
          <template #default="{ row }">
            <el-tag :type="row.type === 'MENU' ? 'success' : 'info'">
              {{ row.type === 'MENU' ? '菜单' : '按钮' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="path" label="路径" />
        <el-table-column prop="component" label="组件" />
        <el-table-column prop="icon" label="图标" />
        <el-table-column prop="sort" label="排序" width="80" />
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
            <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'

const loading = ref(false)
const permissions = ref([])

// 获取权限列表
const fetchPermissions = async () => {
  loading.value = true
  try {
    const response = await axios.get('/api/permissions')
    permissions.value = response.data
  } catch (error) {
    ElMessage.error('获取权限列表失败')
  } finally {
    loading.value = false
  }
}

// 编辑权限
const handleEdit = async (row: any) => {
  try {
    await axios.put(`/api/permissions/${row.id}`, row)
    // 记录更新日志
    await axios.post('/api/logs', {
      action: 'UPDATE_PERMISSION',
      description: `更新权限：${row.name}`,
    })
    ElMessage.success('更新权限成功')
    fetchPermissions()
  } catch (error) {
    ElMessage.error('更新权限失败')
  }
}

// 删除权限
const handleDelete = async (row: any) => {
  try {
    await ElMessageBox.confirm('确定要删除该权限吗？', '提示', {
      type: 'warning',
    })
    await axios.delete(`/api/permissions/${row.id}`)
    // 记录删除日志
    await axios.post('/api/logs', {
      action: 'DELETE_PERMISSION',
      description: `删除权限：${row.name}`,
    })
    ElMessage.success('删除权限成功')
    fetchPermissions()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除权限失败')
    }
  }
}

// 记录页面访问日志
const recordPageAccess = async () => {
  try {
    await axios.post('/api/logs', {
      action: 'ACCESS_PAGE',
      description: '访问权限管理页面',
    })
  } catch (error) {
    console.error('记录页面访问日志失败:', error)
  }
}

onMounted(() => {
  fetchPermissions()
  recordPageAccess()
})
</script>

<style scoped>
.permission-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
